import React, { Component } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import Loading from "../components/Loading";
import { Outlet } from "react-router-dom";
import "./index.scss";

export default class index extends Component {
  state = {
    loading: false,
    goTop: "goTop",
    current: 0,
  };
  componentDidMount() {
    window.addEventListener("scroll", (e) => {
      if (window.scrollY > 70) {
        this.setState({ goTop: "goTop" });
      } else {
        this.setState({ goTop: "goTop hidden" });
      }
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 500);
  }
  goTop = () => {
    const top = document.documentElement.scrollTop || document.body.scrollTop;
    if (top > 0) {
      window.requestAnimationFrame(this.goTop);
      window.scrollTo(0, top - top / 8);
    }
  };
  render() {
    const { loading, goTop } = this.state;
    return (
      <>
        {loading ? (
          <Loading></Loading>
        ) : (
          <>
            <Header current={this.state.current}></Header>
            <main>
              <Outlet />
              <div className={goTop} onClick={this.goTop}>
                <div className="icon">
                  <img src={require("../static/images/goTop.png")} alt="" />
                </div>
              </div>
            </main>
            <Footer></Footer>
          </>
        )}
      </>
    );
  }
}
